/*
 *@description:登录页面
 *@Author:@rennan
 *@Date:2023-12-26 09:05:57
 *@version: V1.0.0
*/
<template>
  <div class="login_box">
    <div class="box">
      <div class="login_title">易洁家政平台</div>
      <div class="login_form">
        <van-form @submit="onSubmit">
          <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>

          <div class="login_sign" @click="toSign">
            没有账号?点击注册
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
import instance from '@/utils/instance.js'
import utils from '@/utils/index.js'

export default {
  // 数据源
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      instance.post('/user/login',{
        username:this.username,
        password:this.password
      }).then(res=>{
        const result = res.data
        console.log(result);
        if(result.status === 200 && result.data.token){
          //登录成功了(消息提示)，通过了后台验证
          utils.showMessage('success','登录成功')
          //登录完成之后可以获取到一个token值（有这个值表示用户已经登录成功了，反之就没有成功）
          //sessionStorage中保存token
          utils.setToken('tk',result.data.token)
          this.$router.push('/main')
        }else{
          //没有登录成功，给一个提示信息
          utils.showMessage('danger','登录失败')
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    // 跳转到注册页面
    toSign(){
      this.$router.push('/sign')
    }
  }
}
</script>
<style scoped>
.login_box {
  height: 100vh;
  background-image: linear-gradient(#ff4b1f, #ff9068);
}

.box {
  position: relative;
  top: 15%;
  box-sizing: border-box;
  padding: 10px;
}

.login_title {
  font-size: 40px;
  color: #fff;
  text-align: center;
}

.login_form {
  height: 220px;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 100%, .2);
  margin-top: 20%;
}

.login_sign {
  height: 20px;
  text-align: center;
  color: #11998e;
}

.van-cell {
  margin-top: 10px;
}

.van-button {
  background: linear-gradient(to right, rgb(255, 144, 104), rgb(255, 75, 31));
  border: none;
}
</style>